<template>
  <div class="pageBox">
    <div class="top">
      <div class="searchBox flex-between" @click="$router.push('/search')">
        <div class="seaLeft">福缘聚</div>
        <div class="seaCenter flex-row">
          <img src="@/image/home/sousuo_icn@2x.png" alt="" />
          <input type="text" placeholder="输入搜索关键词" readonly />
        </div>
        <button class="seaBtn">搜索</button>
      </div>
      <div class="swipeBox">
        <div ref="swiperContainer" class="swiper-container swiper-main">
          <div class="swiper-wrapper">
            <div
              :class="[
                item.status
                  ? 'swiper-slide my-swiper-slide my-swiper-slide-active'
                  : 'swiper-slide my-swiper-slide',
              ]"
              v-for="(item, index) in swiperData"
              :key="index"
            >
              <img
                :class="[item.status ? 'banner bannerActive' : 'banner']"
                :src="item.src"
                alt=""
              />
            </div>
          </div>
          <div ref="swiperPagination" class="swiper-pagination"></div>
        </div>
      </div>
    </div>

    <div class="content">
      <img
        class="advertise"
        :src="homeList[0] ? homeList[0].src : ''"
        alt=""
        @click="onAdvertise(homeList[0])"
      />
      <div class="noticeBox flex-between">
        <img class="noticeIcon" src="@/image/home/noticeIcon.png" alt="" />
        <div class="notice">
          <van-notice-bar left-icon="" :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <van-swipe-item
                @click="goNoticeDetals(item)"
                v-for="item in noticeList"
                :key="item.id"
                >{{ item.title }}</van-swipe-item
              >
            </van-swipe>
          </van-notice-bar>
        </div>
        <img
          class="moreIcon"
          src="@/image/home/moreIcon.png"
          alt=""
          @click="$router.push('/notice')"
        />
      </div>

      <div class="adverVideo" v-html="videoText"></div>

      <div class="goodsBox">
        <div class="title flex-between" @click="goGoodsList">
          <p>精品推荐</p>
          <!-- <van-icon name="arrow" color="#333333" size="18px" /> -->
          <p>更多</p>
        </div>
        <div class="list flex">
          <div
            class="listItem"
            v-for="item in recommend"
            :key="item.id"
            @click="goGoodsDetails(item)"
          >
            <img class="icon" :src="item.thumbUrl" alt="" />
            <p class="tit oneHidden">{{ item.title }}</p>
            <div class="price">¥{{ item.marketprice }}</div>
          </div>
        </div>
      </div>

      <div class="classifyBox" v-for="(item, index) in menuList" :key="item.id">
        <img
          class="advertise"
          :src="homeList[index + 1] ? homeList[index + 1].src : ''"
          alt=""
          v-if="index < 4"
          @click="onAdvertise(homeList[index + 1])"
        />
        <div class="goodsBox">
          <div class="title flex-between" @click="onMenuItem(item)">
            <p>{{ item.name }}</p>
            <!-- <van-icon name="arrow" color="#333333" size="18px" /> -->
            <p>更多</p>
          </div>
          <div class="list flex">
            <div
              class="listItem"
              v-for="item2 in item.children"
              :key="item2.id"
              @click="goGoodsDetails(item2)"
            >
              <img class="icon" :src="item2.thumbUrl" alt="" />
              <p class="tit oneHidden">{{ item2.title }}</p>
              <div class="price">¥{{ item2.marketprice }}</div>
            </div>
          </div>
        </div>
      </div>

      <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <div class="exchangeBox">
          <div class="exchangeTitle flex-center">
            <img src="@/image/home/exchangeLeft.png" alt="" />
            <p>热销专区</p>
            <img src="@/image/home/exchangeRight.png" alt="" />
          </div>

          <div class="goodsList flex-between">
            <div
              class="goodsItem"
              v-for="item in list"
              :key="item.id"
              @click="goGoodsDetails(item)"
            >
              <img class="goodsIcon" :src="item.thumbUrl" alt="" />
              <div class="goodsTitle oneHidden">{{ item.title }}</div>
              <div class="goodsPrice flex-row">
                <p>¥{{ item.marketprice }}</p>
                <del>¥{{ item.productprice }}</del>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <van-popup v-model:show="show" round :close-on-click-overlay="false">
      <div class="popupBox">
        <div class="con" v-html="popData.content"></div>
        <div class="url flex-center" @click="onUrl">{{ popData.url }}</div>
        <button class="close" @click="onClose">关闭&nbsp;{{ time }}</button>
      </div>
    </van-popup>

    <foot-component tab="0"></foot-component>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, nextTick, ref } from "vue";
import Swiper from "../../assets/swiper/swiper.js";
import footComponent from "../../components/footComponent.vue";
import router from "../../router/index.js";
import { post } from "../../untils/request/index.js";

export default defineComponent({
  components: {
    footComponent,
  },
  setup() {
    const swiperContainer = ref(null);
    const swiperPagination = ref(null);
    const activeIndex = ref(0);
    const swiperData = ref([]);
    const noticeList = ref([]);
    const homeList = ref([]);
    const videoText = ref(null);
    const menuList = ref([]);
    const recommend = ref([]); // 精品推荐

    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    const show = ref(false);
    const popData = ref(null);
    const time = ref(0);

    // 热销专区
    function onLoad() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "2000",
        data: {
          lastId: lastId.value,
          page: page.value,
          sort: " id",
          cateId: "",
          genre: 2,
          isrecommand: "",
          keyword: "",
        },
      }).then((res) => {
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
        // 热销专区只显示32个商品
        if (list.value.length > 32) {
          list.value = list.value.slice(0, 32);
          loading.value = false;
          finished.value = true;
        }
      });
    }

    function getSwiper() {
      new Swiper(swiperContainer.value, {
        pagination: {
          el: swiperPagination.value,
          clickable: true,
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
        slidesPerView: 1,
        centeredSlides: true,
        spaceBetween: 5,
        preloadImages: true,
        updateOnImagesReady: true, //当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true
        on: {
          slideChange: function () {
            // console.log("改变了，activeIndex为" + this.activeIndex);
            onChange(this.activeIndex);
          },
        },
      });
    }

    function onChange(activeIndex) {
      swiperData.value.forEach((item) => {
        item.status = false;
        if (item.sid == activeIndex) {
          item.status = true;
        }
      });
    }

    function goNoticeDetals(param) {
      router.push({
        path: "/noticeDetails",
        query: {
          id: param.id,
        },
      });
    }

    function goGoodsDetails(param) {
      router.push({
        path: "/goodsDetails",
        query: {
          id: param.id,
        },
      });
    }

    function getCon() {
      post("/portal", {
        module: "Content",
        interface: "6000",
      }).then((res) => {
        let banner = res.data.slideList;
        noticeList.value = res.data.noticeList;
        homeList.value = res.data.homeList;
        menuList.value = res.data.cates;
        videoText.value = res.data.videoText;
        banner.forEach((item, index) => {
          if (index == 0) {
            item.status = true;
            item.sid = index + 1;
          } else {
            item.status = false;
            item.sid = index + 1;
          }
        });
        swiperData.value = banner;
        nextTick(() => {
          getSwiper();
        });
      });
    }
    getCon();

    // 点击分类
    function onMenuItem(param) {
      router.push({
        path: "/goodsList2",
        query: {
          cateId: param.id,
          kind: "more",
        },
      });
    }

    //精品推荐更多
    function goGoodsList() {
      router.push({
        path: "/goodsList",
        query: {
          genre: 2,
          isrecommand: 1,
        },
      });
    }

    //精品推荐
    function getRecommend() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "2000",
        data: {
          lastId: 0,
          page: 1,
          sort: "",
          cateId: "",
          genre: 2,
          isrecommand: 1,
          keyword: "",
        },
      }).then((res) => {
        recommend.value = res.data.list.slice(0, 8);
      });
    }
    getRecommend();

    //广告图跳转
    function onAdvertise(param) {
      if (param.type == 5) {
        window.location.href = param.url;
      } else if (param.type == 4) {
        router.push({
          path: "/goodsList2",
          query: {
            cateId: param.url,
          },
        });
      }
    }

    function getPopData() {
      post("/portal", {
        module: "Content",
        interface: "4003",
        data: {
          name: "popup",
        },
      }).then((res) => {
        console.log(res, "弹窗");
        popData.value = res.data;
        show.value = localStorage.getItem("showPop") == 1 ? true : false;
        time.value = 10;
        let timer = setInterval(() => {
          time.value--;
          if (time.value == 0) {
            clearInterval(timer);
            show.value = false;
            localStorage.setItem("showPop", 0);
          }
        }, 1000);
      });
    }
    getPopData();

    function onClose() {
      show.value = false;
      localStorage.setItem("showPop", 0);
    }

    function onUrl() {
      window.location.href = popData.value.url;
    }

    return {
      activeIndex,
      swiperData,
      noticeList,
      swiperContainer,
      swiperPagination,
      homeList,
      menuList,
      videoText,
      recommend,
      page,
      lastId,
      list,
      loading,
      finished,
      show,
      time,
      popData,
      getSwiper,
      goNoticeDetals,
      goGoodsDetails,
      getCon,
      onMenuItem,
      goGoodsList,
      getRecommend,
      onLoad,
      onAdvertise,
      getPopData,
      onClose,
      onUrl,
    };
  },
});
</script>

<style scoped lang="less">
@import "../../assets/swiper/swiper.css";
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 136px;
  background: linear-gradient(360deg, #f50811 0%, #b30b11 100%);
  .top {
    width: 100%;
    position: relative;
    padding: 16px 30px 0;
    .searchBox {
      .seaLeft {
        font-size: 36px;
        color: #ffffff;
        line-height: 45px;
      }
      .seaCenter {
        width: 488px;
        height: 60px;
        background: #ffffff;
        border-radius: 30px;
        border: 1px solid #cccccc;
        padding-left: 20px;
        img {
          width: 32px;
          height: 32px;
        }
        input {
          background-color: transparent;
          border: none;
          padding-left: 6px;
        }
      }
      .seaBtn {
        border: none;
        background: transparent;
        font-size: 26px;
        font-weight: 400;
        color: #ffffff;
        line-height: 37px;
      }
    }
    .swipeBox {
      height: 300px;
      margin-top: 44px;
      position: relative;
      .swiper-main {
        width: 100%;
        height: 300px;
      }
      :deep(.swiper-pagination-bullet) {
        width: 7px;
        height: 6px;
        background: #ffffff;
        opacity: 0.4;
        border-radius: 50%;
      }
      :deep(.swiper-pagination-bullet-active) {
        width: 26px;
        height: 7px;
        background: #ffffff;
        opacity: 1;
      }
      .my-swiper-slide {
        padding-top: 17px;
      }
      .my-swiper-slide-active {
        padding-top: 0;
      }

      .banner {
        width: 100%;
        height: 268px;
        border-radius: 16px;
      }
      .bannerActive {
        height: 300px;
        box-shadow: 0px 4px 12px 0px rgba(223, 207, 207, 0.5);
      }
    }
  }
  .content {
    padding: 30px 30px 0;
    .advertise {
      width: 690px;
      height: 220px;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 16px;
    }
    .noticeBox {
      width: 100%;
      height: 79px;
      background: #fbfbfb;
      box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.1);
      border-radius: 40px;
      padding: 0 20px;
      margin-top: 30px;
      .noticeIcon {
        widows: 44px;
        height: 44px;
      }
      .moreIcon {
        widows: 40px;
        height: 40px;
      }
      .notice {
        width: 75%;
        .notice-swipe {
          height: 40px;
          line-height: 40px;
        }
        :deep(.van-notice-bar) {
          padding: 0;
          background: transparent;
        }
        :deep(.van-swipe-item) {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 26px;
          font-weight: 400;
          color: #4d4d4d;
        }
      }
    }
    .adverVideo {
      width: 100%;
      height: 300px;
      background: #000000;
      border-radius: 16px;
      margin-top: 30px;
      :deep(iframe) {
        width: 100%;
        height: 100%;
      }
    }

    .goodsBox {
      padding: 34px 15px 8px;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
      border-radius: 16px;
      margin-top: 30px;
      .title {
        p {
          font-size: 30px;
          font-weight: bold;
          color: #fd3269;
          line-height: 42px;
        }
      }
      .list {
        margin-top: 30px;
        flex-wrap: wrap;
        .listItem {
          width: 24%;
          margin: 0 3px;
          margin-bottom: 37px;
          .icon {
            width: 100%;
            height: 130px;
            border-radius: 12px 12px 0px 0px;
          }
          .tit {
            width: 100%;
            font-size: 26px;
            font-weight: 400;
            color: #333333;
            line-height: 37px;
          }
          .price {
            font-size: 30px;
            font-weight: 500;
            color: #e00b12;
            line-height: 42px;
          }
        }
      }
    }
    .classifyBox {
      margin-top: 30px;
    }

    .goodsList {
      margin-top: 30px;
      flex-wrap: wrap;
      justify-content: flex-start;
      .goodsItem {
        width: 48%;
        border-radius: 16px;
        background: #ffffff;
        padding-bottom: 16px;
        position: relative;
        margin: 0 4px 20px;
        .goodsIcon {
          width: 100%;
          height: 260px;
          border-radius: 12px 12px 0px 0px;
        }
        .hot {
          width: 64px;
          height: 30px;
          position: absolute;
          left: 0;
          top: 140px;
          z-index: 1;
        }
        .goodsTitle {
          font-size: 28px;
          font-weight: 500;
          color: #333333;
          padding: 10px 0 0 12px;
          width: 100%;
        }
        .goodsPrice {
          padding: 9px 0 0 12px;
          align-items: flex-end;
          p {
            font-size: 36px;
            font-weight: 500;
            color: #e00b12;
          }
          del {
            font-size: 22px;
            font-weight: 400;
            color: #b3b3b3;
            padding-bottom: 4px;
          }
        }
      }
    }

    .exchangeBox {
      margin-top: 25px;
      .exchangeTitle {
        img {
          width: 16px;
          height: 24px;
        }
        p {
          font-size: 34px;
          font-weight: 500;
          color: #fff;
          padding: 0 16px;
        }
      }
    }
  }
  .popupBox {
    width: 640px;
    height: 1188px;
    position: relative;

    .con {
      width: 100%;
      height: 1000px;
      color: #333333;
      font-size: 28px;
      overflow-y: auto;
      :deep(img) {
        max-width: 100%;
      }
    }
    .url {
      width: 100%;
      height: 88px;
      color: #333333;
      font-size: 28px;
    }
    .close {
      width: 100%;
      height: 100px;
      background-color: #f50811;
      color: #fff;
      font-size: 28px;
      border-radius: 0 0 16px 16px;
      border: none;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
